View GitHub Repository arm-ui

Schedule Inspection
Subscribe

Popup   A
last analyzed

↳ Parent: src/js/modules/popup.js

Complexity

Total Complexity 34

Size/Duplication

Total Lines 94
Duplicated Lines 0 %

Importance

Changes 0
Metric Value
wmc 34
eloc 66
dl 0
loc 94
rs 9.68
c 0
b 0
f 0

10 Functions

Rating   Name   Duplication   Size   Complexity  
A initEvents 0 4 1
C constructor 0 14 10
A onInit 0 5 1
A onLoad 0 5 2
A initCloseIcon 0 6 2
A initHTML 0 11 2
A open 0 12 4
A manualClose 0 3 1
C close 0 29 10
A manualOpen 0 3 1
1 
"use strict";
2 
Object.defineProperty(exports, "__esModule", { value: true });
3 
const globals_1 = require("../globals/globals");
4 
(function (root, factory) {
5 
    if (typeof globals_1.define === 'function' && globals_1.define.amd) {
6 
        globals_1.define([], factory);
7 
    }
8 
    else if (typeof module === 'object' && module.exports) {
9 
        module.exports = factory();
10 
    }
11 
    else {
12 
        root.Popup = factory();
13 
    }
14 
}(typeof self !== 'undefined' ? self : this, function () {
0 ignored issues
– show
Bug introduced by
The variable self seems to be never declared. If this is a global, consider adding a /** global: self */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
15 
    class Popup {
16 
        constructor(options) {
17 
            if (!options.el) {
18 
                throw new Error('No popup root selector');
19 
            }
20 
            if (!options.openers) {
21 
                throw new Error('No popup openers');
22 
            }
23 
            this.options = options;
24 
            this.options.el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;
25 
            this.options.openers = typeof options.openers === 'string' ? document.querySelectorAll(options.openers) : options.openers;
26 
            this.options.closable = options.closable || false;
27 
            this.onInit();
28 
            this.onLoad();
29 
        }
30 
        onInit() {
31 
            this.initHTML();
32 
            this.initEvents();
33 
            this.initCloseIcon();
34 
        }
35 
        onLoad() {
36 
            if (this.options && this.options.onLoad) {
37 
                this.options.onLoad();
38 
            }
39 
        }
40 
        initHTML() {
41 
            this.options.el.classList.add('popup');
42 
            this.options.el.firstElementChild.classList.add('popup__container');
43 
            if (this.options.closable) {
44 
                let popupClose = document.createElement('button');
45 
                popupClose.classList.add('popup__close-btn');
46 
                this.options.el.firstElementChild.appendChild(popupClose);
47 
            }
48 
            document.body.appendChild(this.options.el);
49 
            return this.options.el;
50 
        }
51 
        initEvents() {
52 
            this.open();
53 
            this.close();
54 
        }
55 
        initCloseIcon() {
56 
            if (this.options.closable && this.options.closeIcon) {
57 
                let closeBtn = this.options.el.querySelector('.popup__close-btn');
58 
                closeBtn.innerHTML = this.options.closeIcon;
59 
            }
60 
        }
61 
        open() {
62 
            let that = this;
63 
            that.options.openers.forEach(function (popupOpen) {
64 
                popupOpen.addEventListener('click', function (e) {
65 
                    e.preventDefault();
66 
                    that.options.el.classList.add('active');
67 
                    if (that.options.onOpen) {
68 
                        that.options.onOpen(e);
69 
                    }
70 
                });
71 
            });
72 
        }
73 
        close() {
74 
            let that = this;
75 
            document.addEventListener('keydown', function (e) {
76 
                if (e.key === "Escape") {
77 
                    that.options.el.classList.remove('active');
78 
                    if (that.options.onClose) {
79 
                        that.options.onClose.call(that);
80 
                    }
81 
                }
82 
            });
83 
            that.options.el.addEventListener('click', function (e) {
84 
                if (!e.target.closest('.popup__container')) {
85 
                    that.options.el.classList.remove('active');
86 
                    if (that.options.onClose) {
87 
                        that.options.onClose.call(that);
88 
                    }
89 
                }
90 
            });
91 
            let popupClose = that.options.el.querySelector('.popup__close-btn');
92 
            if (popupClose) {
93 
                popupClose.addEventListener('click', function (e) {
94 
                    e.preventDefault();
95 
                    that.options.el.classList.remove('active');
96 
                    if (that.options.onClose) {
97 
                        that.options.onClose.call(that);
98 
                    }
99 
                });
100 
            }
101 
        }
102 
        manualOpen() {
103 
            this.options.el.classList.add('active');
104 
        }
105 
        manualClose() {
106 
            this.options.el.classList.remove('active');
107 
        }
108 
    }
109 
    return Popup;
110 
}));
111